<template>
    <div class="flex flex-col h-full">
        <div class=" shrink-0 relative  bg-gradient-to-tr from-[#6effe4] to-[#f2c16c] via-[#f9f5f9]">
            <div class="absolute inset-0 z-0 bg-gradient-to-t from-white via-white/0"></div>
            <div class="absolute z-0 w-24 h-24 border-4 border-[#6effe4] rounded-full top-4 -left-10 blur-sm"></div>
            <!-- <div class="absolute z-0 w-36 h-36 border-8 border-[#ebb256] rounded-full -top-16 right-6 blur-sm"></div> -->
            <div class="relative z-10 p-4 text-sm text-gray-600">
                <div class="flex items-center justify-between text-base">
                    <IUil:setting class="" />
                    <IIonNotificationsOutline />
                </div>
                <div class="mt-10">
                    <UserCell size="lg">
                        <template #extend>
                            <div></div>
                        </template>
                    </UserCell>
                </div>
                <div class="flex items-center justify-around mt-8 text-center">
                    <div>
                        <div class="text-lg">2322</div>
                        <div class="text-xs text-gray-500">粉丝</div>
                    </div>
                    <div>
                        <div class="text-lg">2322</div>
                        <div class="text-xs text-gray-500">关注</div>
                    </div>
                    <div>
                        <div class="text-lg">2322</div>
                        <div class="text-xs text-gray-500">收藏</div>
                    </div>
                    <div>
                        <div class="text-lg">2322</div>
                        <div class="text-xs text-gray-500">优惠券</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-4 shrink-0">
            <img :src="ad" />
        </div>
        <div class="p-4 overflow-y-auto grow">
            <div class="">
                <TitleCell>
                    <div class="text-base">我的订单</div>
                    <template #extend>
                        <RouterLink :to="{
                            name: 'order',
                            params: { type: 'all' }
                        }">
                            <div class="flex items-center text-xs text-gray-500">
                                <div>全部订单</div>
                                <IMingcute:rightFill />
                            </div>
                        </RouterLink>
                    </template>
                </TitleCell>
                <div class="flex items-center justify-around mt-6 text-sm leading-10 text-center text-gray-600">
                    <RouterLink v-for="(item, index) in orderType" :to="{
                        name: 'order', params: { type: item.code }
                    }">
                        <div>
                            <div class="w-8 h-8">
                                <img :src="item.src" />
                            </div>
                            <div>{{ item.name }}</div>
                        </div>
                    </RouterLink>
                </div>
            </div>
            <div class="mt-6">
                <TitleCell>
                    <div class="text-base">工具和服务</div>
                </TitleCell>
                <div class="grid grid-cols-4 gap-4 mt-6 text-sm leading-10 text-center text-gray-600">
                    <div v-for="(item, index) in tools">
                        <div class="w-6 h-6 mx-auto ">
                            <img :src="item" />
                        </div>
                        <div>代付款</div>
                    </div>
                </div>
            </div>
            <div class="mt-6">
                <TitleCell>
                    <div class="text-base">其他</div>
                </TitleCell>
                <div class="mt-6 text-sm text-gray-600">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-1">
                            <IUil:setting />
                            <div>设置</div>
                        </div>
                        <div>
                            <IMingcute:rightFill />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import o1 from '~/assets/me/order/order1.png'
import o2 from '~/assets/me/order/order2.png'
import o3 from '~/assets/me/order/order3.png'
import o4 from '~/assets/me/order/order4.png'
import o5 from '~/assets/me/order/order5.png'
import ad from '~/assets/ad/ad3.png'
const orderType = [
    { src: o1, name: '代付款', code: 'unpaid' },
    { src: o2, name: '待收货', code: 'unshipped' },
    { src: o3, name: '代发货', code: 'unreceived' },
    { src: o4, name: '评价', code: 'comment' },
    { src: o5, name: '售后', code: 'after-sale' },
]

const tools = Object.values(import.meta.glob<string>('~/assets/me/tool/*', { eager: true, import: 'default' }))
</script>
    
<style></style>